<!-- 修改、查看 用户信息 -->
<template>
    <uni-nav-bar title="用户信息" :statusBar="true" fixed :border="false" leftIcon="left"
                 backgroundColor="#4BA9FB" color="#FFFFFF" @clickLeft="commonUtils.finish">
    </uni-nav-bar>

    <!-- 表单内容 -->
    <view class="cellContent">
        <u-form labelPosition="left" :model="formData" :rules="rules" ref="form1" labelWidth="70">
            <u-form-item label="姓名" prop="formData.realName" :borderBottom="true">
                <u-input v-model="formData.realName" border="none" placeholder="请输入姓名" clearable></u-input>
            </u-form-item>
            <u-form-item label="工 号" prop="formData.jobNumber" :borderBottom="true">
                <u-input v-model="formData.jobNumber" border="none" placeholder="请输入工号" clearable></u-input>
            </u-form-item>
            <u-form-item label="手机号" prop="formData.mobile" :borderBottom="true">
                <u-input v-model="formData.mobile" border="none" placeholder="请输入手机号" clearable></u-input>
            </u-form-item>
            <u-form-item label="身份证号" prop="formData.idNumber" :borderBottom="true">
                <u-input v-model="formData.idNumber" border="none" placeholder="请输入身份证号" clearable></u-input>
            </u-form-item>
            <!--            <u-form-item label="照 片" prop="formData.imgs" :borderBottom="true">-->
            <!--                <u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" multiple-->
            <!--                          :maxCount="2" :previewFullImage="true" :name="formData.imgs">-->
            <!--                </u-upload>-->
            <!--            </u-form-item>-->
        </u-form>
    </view>

    <!-- 修改按钮 -->
    <view class="btnLayout">
        <view class="commit" @click="onModifyClick">确认修改</view>
    </view>
</template>

<script setup>
import {ref, reactive} from 'vue';
import {queryUserInfoRequest, updateUserInfoRequest, uploadFile} from "@/net/Api";
import {myStore} from "@/stores";
import {onLoad} from "@dcloudio/uni-app"
import * as Url from "@/net/Url";
import commonUtils from "@/utils/commonUtils";

const store = myStore()
const fileList = ref([])
const formData = reactive({
    realName: '',
    jobNumber: '',
    mobile: '',
    idNumber: '',
    imgs: "",
})

const rules = reactive({
    realName: [
        {
            required: true,
            message: '请输入姓名',
            trigger: 'blur'
        },
    ],
})

onLoad((options) => {
    queryUserData()
})

/**
 * 删除图片
 */
const deletePic = (event) => {
    fileList.value.splice(event.index, 1);
}

/**
 * 新增图片
 */
const afterRead = async (event) => {
    // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
    let lists = [].concat(event.file);
    let fileListLen = fileList.value.length;
    lists.map((item) => {
        fileList.value.push({
            ...item,
            status: 'uploading',
            message: '上传中',
        });
    });

    let item = fileList.value[fileListLen];
    uploadFileReuqest(lists[0].url, item, fileListLen);
}

/**
 * 上传图片 请求
 */
const uploadFileReuqest = (filePath, item, fileListLen) => {
    let params = {
        filePath: filePath,
        name: 'multipartFile',
    }
    uploadFile(params).then((res) => {
        fileList.value[fileListLen].status = "success"
        fileList.value[fileListLen].imgUrl = res.data
    }).catch((err) => {

    })
}

/**
 * 查询用户信息
 */
const queryUserData = () => {
    let params = {
        "id": store.userId,
    }
    uni.showLoading()
    queryUserInfoRequest(params).then((res) => {
        uni.hideLoading()
        Object.assign(formData, res.data)
    }).catch((err) => {
        uni.hideLoading()
    })
}

/**
 * 修改用户信息
 */
const onModifyClick = () => {
    if (!commonUtils.checkPhoneNumber(formData.mobile)) {
        uni.showToast({
            title: '手机号有误',
            icon: 'none'
        })
        return
    }
    if (!commonUtils.checkIdCard(formData.idNumber)) {
        uni.showToast({
            title: '身份证号有误',
            icon: 'none'
        })
        return
    }

    // //处理图片url参数
    // let imgsArr = fileList.value.map((item) => {
    //     return item.imgUrl
    // })
    // let imgsUrl = imgsArr.toString();

    let params = {
        id: store.userId,
        userName: store.userInfo.userName,
        nickName: formData.realName,
        mobile: formData.mobile,
        idNumber: formData.idNumber,
        jobNumber: formData.jobNumber,
        // "facePicture": imgsUrl
    }

    console.log("params = ", params);
    uni.showLoading()
    updateUserInfoRequest(params).then((res) => {
        uni.hideLoading()
        uni.showToast({
            title: '修改成功',
        })
        setTimeout(() => {
            uni.navigateBack({
                delta: 1
            })
        }, 500)
    }).catch((err) => {
        uni.hideLoading()
    })
}
</script>

<style scoped lang="scss">
.btnLayout {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.commit {
    width: 70%;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    background-color: $themeColor;
    color: #FFFFFF;
    border-radius: 40rpx;
    font-size: 30rpx;
    margin-top: 100rpx;
}

.cellContent {
    width: 100%;
    box-sizing: border-box;
    background-color: #FFFFFF;
}

.avatarTxt {
    width: 145rpx;
    margin: 0 0 0 30rpx;
    font-size: 32rpx;
    color: #333333;
    text-align: justify;
}

.avatarContent {
    display: flex;
    background-color: #FFFFFF;
    padding: 30rpx 0;
}

.avatar {
    width: 150rpx;
    height: 150rpx;
}

:deep(.u-form-item__body) {
    padding: 24rpx 30rpx !important;
}
</style>